●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top navigation and secondary header with search and user avatar
- Tabbed dashboard header with selectable tabs (Overview, Analytics, Reports, Notifications)
- Responsive stat cards grid (Total Revenue, Subscriptions, Sales, Active Now)
- Custom bar chart component rendering bars via inline styles
- Recent sales list with avatars and formatted currency
## Key components
- Razor components: DashboardPage.razor, StatCard.razor, BarChart.razor, RecentSales.razor
- Model classes: ChartDataPoint, SaleViewModel
- Blazor features: @code block, @onclick handlers, component parameters ([Parameter])
- DOM patterns: foreach rendering, inline style height calculation for bars
## How it works
- Tabs use a local field (activeTab) and @onclick to switch state; GetTabClass returns Tailwind utility classes for active vs inactive state.
- StatCard is a reusable component that accepts Title, Value, Change, and IconClass parameters.
- BarChart builds a ChartData list in OnInitialized and maps Value to inline style heights relative to MaxValue.
- RecentSales populates a list of SaleViewModel instances in OnInitialized and formats amounts using CultureInfo.
- Interactions are local to the page; no EditForm or server validation is present.
## Styling
- Uses Tailwind utility classes throughout (grid, flex, gap-*, px-*, text-*, bg-amber-*, rounded-*, shadow)
- Responsive layouts via grid-cols-{n} and breakpoints (sm:, md:, lg:)
- Chart uses simple div bars and hover styles rather than a chart library; cards use bg-white and rounded-xl for visual grouping
## Reuse steps
1. Add components and models to a Blazor project; place StatCard, BarChart, and RecentSales in a shared components folder.
2. Ensure Tailwind CSS is configured in the project (postcss/build pipeline or CDN for prototypes).
3. Import namespaces where needed and register any shared services if migrating data to APIs.
4. Replace hard-coded ChartData and Sales lists with injected services or HttpClient calls; move models to separate files.
5. Adjust icons (uses Font Awesome classes) or swap for a preferred icon set; ensure CSS for icons is included.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI and is editable; it does not include back-end services, authentication, or persistence.
- Chart is a static bar layout; replace with a charting library (Chart.js, ApexCharts) for axes, tooltips, and animation.
- Internationalization, accessibility attributes (aria-*), and keyboard navigation require additional work.
- Add API wiring, state management, and server-side paging/filtering for large datasets.